/**
 * 动态的改变页面的内容
 * sass转换
 * html压缩
 * css压缩
 */

var gulp = require("gulp");
var sass = require("gulp-sass");
var sourcemaps = require('gulp-sourcemaps');
var minihtml = require('gulp-minify-html');
var autoprefixer = require('gulp-autoprefixer');

var bs = require('browser-sync').create();
var reload = bs.reload;

//生成服务
gulp.task('server',["sass","minihtml"],function(){
    //生成服务
    bs.init({
        //二维码插件QR-image
        open: "external",
        server:"./build"

        //反向代理
        // proxy: "localhost"
    })
    //监听未被压缩的html是否改变，如果改变就压缩
    gulp.watch('./*.html',['minihtml']);
    gulp.watch('./sass/**/*.scss',['sass']);
    //监听压缩后的html。如果改变则重载页面
    gulp.watch('./build/*.html').on('change',reload);
    // gulp.watch('./build/css/**/*.css').on('change',reload);
    
})

//sass任务 将scss转换为css
gulp.task('sass',function(){
    return gulp.src('./sass/**/*.scss')
        .pipe(sourcemaps.init())//生成map
        .pipe(sass({"outputStyle":"compressed"}).on('error',sass.logError))//将scss转为css
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())//生成map
        .pipe(gulp.dest('./build/css'))
        .pipe(reload({stream: true}))//任务执行结束后，将页面重载
})

//压缩html
gulp.task('minihtml',function(){
    return gulp.src('./*.html')
        .pipe(minihtml())
        .pipe(gulp.dest('./build'))
})


gulp.task("default",["server"],function(){
    console.log('任务执行完成');
})